<template>
  <van-pull-refresh v-model="refreshing" style="min-height: 300px" @refresh="getList(1)">
    <template v-if="listData.length">
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了~"
        @load="getList"
      >
        <gb-card
          border
          shadow
          :remind="item.isTimeOut === '2'"
          :color="taskStatusColor[item.taskStatus]"
          class="list-item"
          v-for="(item, key) in listData"
          :key="key"
          @click="goDetail(item)"
        >
          <div class="task-main">
            <img
              class="task-priority-icon"
              :src="require(`@/assets/images/routine/workTasks/task_${taskPriorityImg[item.taskPriority]}@2x.png`)"
              alt=""
            />
            <div class="task-right">
              <p class="task-title">{{ item.taskName }}</p>
              <p class="task-info">
                <span class="task-time">{{ item.deadline }}</span>
                <span class="task-status" :style="{ color: taskStatusColor[item.taskStatus] }">
                  {{ item.taskStatusName }}
                </span>
              </p>
            </div>
          </div>
        </gb-card>
      </van-list>
    </template>
    <template v-else>
      <van-empty
        :image="require('@/assets/images/basic/pic_no_content.png')"
        description="暂无内容~"
        style="height: 200px"
      />
    </template>
  </van-pull-refresh>
</template>
<script>
import Routine from '@/api/routine'
import List from '@/mixins/list'
export default {
  mixins: [List],
  props: {
    searchForm: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      api: Routine.Task,
      taskStatusColor: {
        // 待完成
        1: '#E25656',
        // 进行中
        2: '#E28556',
        // 已完成
        3: '#3CBDD0'
      },
      taskPriorityImg: {
        // 高
        1: 'high',
        // 中
        2: 'mid',
        // 低
        3: 'low'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    goDetail(data) {
      if (this.searchForm.taskOrPlan === '1') {
        this.$router.push({
          path: '/routine/workTasks/leaderTaskDetail',
          query: {
            taskCode: data.taskCode,
            taskStatus: data.taskStatus
          }
        })
      } else if (this.searchForm.taskOrPlan === '2') {
        this.$router.push({
          path: data.taskStatus === '3' ? '/routine/workTasks/plan/detail' : '/routine/workTasks/plan',
          query: {
            taskCode: data.taskCode,
            taskStatus: data.taskStatus
          }
        })
      }
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/list.less';
.task-main {
  display: flex;
  align-items: center;
  padding: 16px 0;
  .task-priority-icon {
    width: 72px;
    height: 72px;
    margin-right: 32px;
  }
  .task-right {
    width: calc(100% - 104px);
    .task-title {
      font-size: 32px;
      font-weight: 500;
      color: #000000;
      line-height: 32px;
    }
    .task-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28px;
      margin-top: 28px;
      .task-time {
        color: rgba(0, 0, 0, 0.78);
      }
      .task-status {
        color: #e28556;
      }
    }
  }
}
</style>
